<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 模拟热门游记数据
const travelNotes = ref([
  {
    id: 1,
    title: '重塑山川——贵州喀斯特专辑（瀑布篇）',
    content: '（P.S.序一章节的内容在第一篇"洞穴篇"里已经发出了，如果看过前一篇，请随意略过，之所以仍放在这里，还是为了文章的完整性。） 序一 儿时的欢乐 小时候随父母在 贵州 的大山里，那时候没...',
    image: '/travel-images/1 (5).png'
  },
  {
    id: 2,
    title: '来自回忆的跨年自驾游：冬季溧水小众打卡指南',
    content: '作为一名旅行博主，脚步从未停歇，和最爱的人，一起做着最爱的事。在充满意义的跨年之际，当然要来一场别有意义的旅行，是对自己一年忙碌的总结，也是给自己的一份犒赏。习惯了城市的忙忙碌...',
    image: '/travel-images/1 (6).png'
  },
  {
    id: 3,
    title: '两条徒步路线，三条骑行路线，我在这个端午重读了黄浦江',
    content: '2022年06月01日，我向自己预约了这篇游记，当时我说： 嘿！自由啦！那就给生活一点颜色看看！ 人生到了某个阶段，便不可避免地开始焦虑，因为总有人告诉你，你应该怎么活，应该走什么样的人...',
    image: '/travel-images/1 (8).png'
  },
  {
    id: 4,
    title: '十朝古都秦淮梦，四季金陵江南风：南京，你好！',
    content: '【序】 2020年暂停了探索世界的脚步，却在家乡 南京 收获了最精彩的春夏秋冬！ 当我将这些镜头里的记录分享给身边的朋友，他们都不约而同的感叹道：原来生活了这么久的城市，是如此的美丽！...',
    image: '/travel-images/1 (9).png'
  }
]);

const navigateToDetail = (id) => {
  router.push(`/destination/${id}`);
};
</script>

<template>
  <div>
    <aside>
      <div class="info">
        <h3>旅行家专栏</h3>
        <h4>专栏首页</h4>
        <img src="/travel-images/1 (4).png" alt="西安：旧长安的画皮" style="width: 100%; height: 180px; object-fit: cover; border-radius: 4px;" />
        <h5>西安：旧长安的画皮</h5>
        <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
      </div>
      <div class="info">
        <h3>旅游攻略推荐</h3>
        <h4>更多</h4>
        <img src="/travel-images/1 (7).png" alt="青海湖旅拍攻略" style="width: 100%; height: 180px; object-fit: cover; border-radius: 4px;" />
        <p class="ellipsis">青海湖旅拍攻略，如何拍出艳压朋友圈的时尚大片？</p>
      </div>
      <div class="info">
        <h3>加入马蜂窝</h3>
        <h4>了解详情></h4>
        <img src="/travel-images/1 (10).png" alt="加入马蜂窝" style="width: 100%; height: 180px; object-fit: cover; border-radius: 4px;" />
      </div>
    </aside>
    
    <div id="hot">
      <div class="title">
        <h2>热门游记</h2>
      </div>
      
      <div 
        v-for="note in travelNotes" 
        :key="note.id" 
        class="review"
        @click="navigateToDetail(note.id)"
      >
        <img :src="note.image" :alt="note.title" />
        <section>
          <h3>{{ note.title }}</h3>
          <p>{{ note.content }}</p>
        </section>
      </div>
    </div>
  </div>
</template>

<style scoped>
aside {
  width: 263px;
  float: left;
}

.info {
  margin-bottom: 40px;
}

.info h3 {
  font-weight: normal;
  font-size: 18px;
  float: left;
  margin-bottom: 20px;
}

.info h4 {
  font-weight: normal;
  font-size: 14px;
  color: #666;
  float: right;
}

.info h5 {
  font-weight: normal;
  font-size: 16px;
  margin-top: 10px;
}

.info p, .review p {
  font-size: 14px;
  color: #666;
  line-height: 1.5em;
  margin-top: 10px;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#hot {
  width: 700px;
  float: right;
}

.title {
  height: 40px;
  border-bottom: 1px solid #999;
  margin-bottom: 20px;
}

.title h2 {
  color: #ff9c00;
  font-weight: normal;
  font-size: 18px;
  padding-left: 10px;
  height: 39px;
  border-bottom: 3px solid #ff9c00;
  width: 180px;
}

.review {
  overflow: hidden;
  margin-bottom: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 10px;
  border-radius: 4px;
}

.review:hover {
  background-color: #f5f5f5;
}

.review img {
  float: left;
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.review section {
  width: 460px;
  float: right;
}

.review h3 {
  color: #333;
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 10px;
}

/* 清除浮动 */
.info::after, .review::after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式设计 */
@media (max-width: 1100px) {
  aside {
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }
  
  #hot {
    width: 100%;
    float: none;
  }
  
  .review section {
    width: calc(100% - 200px);
  }
}

@media (max-width: 768px) {
  .review img {
    float: none;
    margin-bottom: 10px;
  }
  
  .review section {
    width: 100%;
    float: none;
  }
}
</style>
